<template>
    <div v-if="data" class="select-wrapper">
        <select v-if="hldata" v-show="inited" class="ui search dropdown" :class="[fname,size,_editType]">
            <option value="">{{placeholder}}</option>
            <option v-for=" item in hldata" :value="item[_keyname]">{{item.title}}</option>
        </select>
        <div class="ui label" v-if="label">{{label}}</div>
        <i class="ui icon refresh" v-show="inited" @click="refresh"></i>
    </div>
</template>

<script>
    import tool from 'src/util/tool';
    import util from '_util/index';
    import _ from 'lodash';
    import in_array from 'in_array';

    export default {
        created() {
            this.setHldata()
        },
        mounted() {
            util.mywait(this, 'hldata', () => {

              if(this.tunit_city)
                util.mydelay(() => {
                    this.myinit()
                    if(!this.inited)
                        this.inited=true
                },500);
              else{
                  this.myinit()
                  if(!this.inited)
                      this.inited=true
              }

            },0,20);


        },

        data() {
            return {
                hldata: null,
                inited: false,
                newVal: null
            }
        },
        watch: {
            val: function (val, old) {
                if (val != old && val != this.newVal) {
                    this.setSelect()
                }
            },
            data: function (val) {
                if (val)
                    this.setHldata();
            }

        },
        methods: {
            myinit(){
                this.$nextTick(() => {
                    this.jsinit()

                    //设置默认值如果有的话
                    let ctl = this.$store.state.global.current_ctl
                    let is_list = this.$store.state.global.is_list
                    let fname = this.fname

                    if (this.$store.state.list.filterData[ctl] && this.$store.state.list.filterData[ctl][fname] && is_list) {
                        let stype = this.$store.state.list.filterData[ctl][fname];
                        //this.$set(this.$props,'val',stype);

                        this.setSelect(stype);
                    } else {
                        this.setSelect()
                    }


                })
            },
            setHldata() {
                if (util.isArray(this.data)) {
                    this.placeholder = this.placeholder || '请选择'

                    let rs = _.findIndex(this.data, (o) => {
                        let keys = Object.keys(o);
                        return keys.contains('id') && keys.contains('title');
                    })
                    if (rs == -1) {
                        this.hldata = this.data.map((title, id) => {
                            return {
                                id, title
                            }
                        })
                    } else {
                        this.hldata = this.data
                    }
                }

            },
            refresh() {
                $(this.selector).dropdown('clear');
            },
            setSelect(sval) {

                let val = sval || this.val


                if (val !== null && val !== undefined && in_array(val, this.allowedVals)) {

                    $(this.selector).dropdown('set selected', val);
                    let text = $(this.selector).dropdown('get text');

                    this.$emit('selectValsChange', val, this.fname, text)

                } else
                    $(this.selector).dropdown('clear');
            },
            jsinit() {
                let _this = this
                $(this.selector).dropdown({
                    allowAdditions: true,
                    onChange(value, text, $selectedItem){
                        _this.newVal = value;
                        _this.$emit('selectValsChange', value, _this.fname, text)
                        this.blur()
                    }
                });
            }
        },
        computed: {
            ctl(){
                return this.$route.query.ctl;
            },
            selector(){
                return `.ui.dropdown.${this.fname}.${this._editType}`
            },
            allowedVals(){
                let arr = this.hldata.map(item => item[this._keyname]);
//        switch (this.ctl) {
//          case 'Menu':
//            arr = _.concat(arr, this.hldata.map(item => item[this._keyname]))
//            break;
//        }
                return arr;
            },
            _editType(){
                return this.editType || 'EditType_3';
            },
            _keyname(){
                return this.keyname || 'id';
            }
        },
        props: ['fname', 'data', 'val', 'editType', 'placeholder', 'size', 'label', 'keyname', 'tunit_city']
    };
</script>

<style rel="stylesheet/less" lang="less" scoped>
    .select-wrapper {
        width: 234px;
        position: relative;
        .ui.icon.refresh {
            // position: absolute;
            // top: 50%;
            // right: 10px;
            cursor: pointer;
            color: rgba(0, 0, 0, 0.6);
        }
    }
</style>
